<template>
    <div class="p-grid p-fluid">
        <div class="p-col-12 flexbox-demo">

            <!--面包屑-->
            <div style="padding-bottom: 0.95rem;">
                <Breadcrumb :home="home" :model="crumbs"/>
            </div>

            <div class="card">
                <h4>渠道汇总</h4>
                <p>你可以通过下方二维码或链接一次性推广所有产品，更加高效便捷，默认销售渠道：<b>汇总</b>。</p>

            </div>
            <div class="card">
                <h5>推广二维码</h5>
                <div class="p-mr-2 p-d-inline p-mb-3 demo-container">
                    <vue-qr class="vue-qr" :margin="0" :text="promotion_link" colorDark="#000" colorLight="#fff" :size="200"></vue-qr>
                </div>
                <div class="p-mb-12"></div>
                <h5>推广链接</h5>
                <div class="p-mr-2 p-d-inline p-mb-3 demo-container">{{promotion_link}}</div>

                <br><br>
                <p><Button class="p-button-success" v-clipboard:copy="promotion_link" v-clipboard:success="copyOK" v-clipboard:error="copyErr" style="width: 120px;" label="复制链接" icon="pi pi-check" iconPos="left" />
                </p>
            </div>

        </div>

    </div>
</template>

<script>
    import vueQr from 'vue-qr'
    import TableService from '@/api/TableService';
    export default {
        data() {
            return {
                promotion_link:'',
                home: {label: '控制台', icon: 'pi pi-home', to: '/'}, //面包屑公共导航
                crumbs: [ //面包屑
                ],
            }
        },
        clipboard :null,
        TableService: null,
        created() {
            this.TableService = new TableService();
            //获取当前路由名称
            for (let i = 0; i < this.$router.options.routes[1].children.length ; i++){
                if(this.$router.options.routes[1].children[i].path === this.$route.fullPath){
                    this.crumbs = [
                        {label: '渠道管理', },
                        {label: this.$router.options.routes[1].children[i].meta.title},
                    ];
                }
            }
        },
        mounted() {
            this.getPool();
        },
        methods: {
            test(e)
            {
                console.log('复制--'+JSON.stringify(e));
            },
            copyOK () {
                this.$toast.add({severity: 'success', summary: '提示', detail: '已将推广链接复制到粘贴板，快去分享给需要的人吧！', life: 3000});
            },
            copyErr () {
                this.$toast.add({severity: 'info', summary: '提示', detail: '复制失败，你可以手动将链接复制到粘贴板！', life: 3000});
            },
            copy()
            {

            },
            getPool()
            {
                this.TableService.post('/api/get_pool', {}).then(data => {
                    if (data === undefined) {
                        return;
                    }
                    if (typeof (data) === 'object' && data.code !== 20000) {
                        return;
                    }
                    this.promotion_link = data.data.promotion_link;
                });
            },
        },
        watch: {
        },
        components: {
            vueQr: vueQr,
        },
    }
</script>

